<template>
    <div class="development-tendency">
        <div class="LeftLines" id="LeftLines"></div>
    </div>
</template>

<script>
import { color } from 'echarts';

export default {
    name: "",
    props: {
        leftEchartsData: Object, 
    },
    data() {
        return {
            leftCharts: null,
            rightCharts: null,
        };
    },
    watch: {
        leftEchartsData(val) {
            console.log(val);
            this.initLeftLines(val);
        },
    },
    created() { },
    mounted() {
        if (
            Object.keys(this.leftEchartsData).length > 0
        ) {
            this.initLeftLines(this.leftEchartsData);

        }
    },
    methods: {
        initLeftLines(data) {
            let that = this;
            if (
                this.leftCharts != null &&
                this.leftCharts != "" &&
                this.leftCharts != undefined
            ) {
                this.leftCharts.dispose();
            }
            this.leftCharts = this.$echarts.init(
                document.getElementById("LeftLines")
            );
            let option = {
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "rgba(13, 31, 51, 0.85)",
                    borderColor: "rgba(13, 31, 51, 0.85)",
                    textStyle: {
                        color: "#fff",
                        fontSize: 14,
                    },
                    confine: true,
                },
                grid: {
                    //在盒子中的占比位置
                    left: "0%",
                    top: "14%",
                    right: "0%",
                    bottom: "1%",
                    containLabel: true,
                },
                legend: {
                    itemHeight: 12,
                    itemWidth: 12,
                    borderRadius: [4, 4, 0, 0],
                    icon: "circle",
                    right: "0%",
                    top: "-1%",
                    data: data.legendData,
                    textStyle: {
                        color: "#FFFFFF",
                        fontSize: 12,
                    },
                },
                xAxis: [
                    {
                        type: "category",
                        data: data.dataX,
                        axisLabel: {
                            textStyle: {
                                fontSize: 12,
                                color: "rgba(217, 240, 255, 1)",
                            },
                            interval: 0,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(3, 80, 136, 1)'
                            },
                        },
                        axisTick: {
                            show: false, //小刻度
                        },
                        splitLine: {
                            //坐标轴在 grid 区域中的分隔线。
                            show: true, //是否显示分隔线。默认数值轴显示，类目轴不显示。
                            interval: "auto",
                            lineStyle: {
                                color: "rgba(3, 80, 136, 1)",
                                type: "dashed",
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        nameTextStyle: {
                            color: "#C4CACC",
                        },
                        minInterval: 1,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "rgba(217, 240, 255, 1)",
                                fontSize: 12,
                            },
                            formatter: "{value}",
                        },
                        splitNumber: 4,
                        splitLine: {
                            //网格线
                            lineStyle: {
                                type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
                                opacity: 1,
                                width: 1,
                                color: 'rgba(3, 80, 136, 1)'
                            },
                            show: true, //隐藏或显示
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(3, 80, 136, 1)'
                            },
                        },
                    },
                ],

                series: [
                    {
                        name: data.legendData[0],
                        markPoint: {
                            data: [{ type: "max" }],
                            symbol: "circle",
                            symbolSize: 0,
                            label: {
                                show: false,
                            },
                            // itemStyle: {
                            //     color: "#137DFF",
                            //     borderColor: "#137DFF",
                            //     borderWidth: 4,
                            // },
                        },
                        smooth: true,
                        showSymbol: false,
                        type: "line",
                        barGap: "0%",
                        barCategoryGap: "30%",
                        data: data.dataY,
                        areaStyle: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: "rgba(44, 225, 86, 1)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(0 ,0 ,0,0)",
                                },
                            ]),
                        },
                        itemStyle: {
                            color: "rgba(44, 225, 86, 1)",
                        },
                    },
                    {
                        name:  data.legendData[1],
                        markPoint: {
                            symbol: "circle",
                            symbolSize: 8,
                            label: {
                                show: false,
                            },
                            itemStyle: {
                                color: "#00DEFF",
                                borderColor: "#00DEFF",
                                borderWidth: 4,
                            },
                        },
                        smooth: true,
                        showSymbol: false,
                        type: "line",
                        barGap: "0%",
                        barCategoryGap: "30%",
                        data: data.dataY2,
                        areaStyle: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: "rgba(0, 162, 243, 1)",
                                },

                                {
                                    offset: 1,
                                    color: "rgba(0 ,0 ,0,0)",
                                },
                            ]),
                        },
                        itemStyle: {
                            color: "rgba(0, 162, 243, 1)",
                        },
                    },
                ],
            };

            that.leftCharts.clear();
            option && this.leftCharts.setOption(option);

            let index = 0; 
            this.mTime = setInterval(function () {
                that.leftCharts.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: index,
                });
                index++;
                if (index >= data.dataX.length) {
                    index = 0;
                }
            }, 3000);
        },
    },
};
</script>
<style lang="scss" scoped>
.development-tendency {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    margin-top: -0.625vw;

    #LeftLines {
        width: 100%;

        height: 100%;
    }
}
</style>